iT邦幫忙

2024 iThome 鐵人賽
DAY 25
0
自我挑戰組

asp.net可以變出那些功能系列 第 25 篇

圖片輪播:極簡風/跳出視窗提示:現代風

16th鐵人賽
153 瀏覽

  • 分享至 

  • xImage
    •  

圖片輪播:極簡風
https://laihao2.com/Home/Contact16
https://ithelp.ithome.com.tw/upload/images/20241002/20119035yEwwg7a7d3.png

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

這裡沒有用到資料庫~

Controllers裡面的Entities>

public ActionResult Contact16()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段代碼是一個 C# 中 ASP.NET MVC 的控制器方法，它處理來自客戶端的請求並返回一個視圖。我們可以逐步解析：

public ActionResult Contact16()
{
    ViewBag.Message = "Your contact page.";

    return View();
}

  1. public ActionResult Contact16():

    • 這是一個公共方法，名為 Contact16，返回類型為 ActionResult。
    • 在 ASP.NET MVC 中，ActionResult 是一個基類，表示控制器動作的結果，它可以是多種類型的響應（例如返回一個視圖、重定向到另一個 URL 等）。
    • 這個方法的名稱通常與特定的 URL 路徑綁定，用戶通過訪問這個路徑來觸發該方法。

  2. ViewBag.Message = "Your contact page.":

    • 這是將一條消息傳遞給視圖的代碼。
    • ViewBag 是 ASP.NET MVC 中的一個動態對象，它用於在控制器和視圖之間傳遞數據。在這個例子中，Message 字段被賦值為 "Your contact page."。
    • 這個數據將傳遞到視圖中，可以在視圖模板里訪問 ViewBag.Message 來顯示這條信息。

  3. return View();:

    • 這是返回一個視圖給客戶端的代碼。
    • View() 方法告訴 MVC 框架返回與該控制器動作名稱相同的視圖（在這個例子中，很可能是名為 Contact16.cshtml 的視圖文件）。
    • 視圖負責生成最終返回給客戶端的 HTML 頁面。

總結: 這個方法接收用戶請求，設定一個名為 Message 的字符串變量，然後將該變量傳遞給視圖，用於顯示聯系頁面的相關信息。

產生畫面View程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact16";
}

<div class="farm-wrapper">

    <h3>作品-極簡風網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <!DOCTYPE html>
            <html lang="zh-TW">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>極簡風網站</title>
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="Content/css/reset.css">
                <link rel="stylesheet" href="Content/css/farm-style.css">
                <style>
                    body {
                        font-family: sans-serif;
                        margin: 0;
                        padding: 0;
                        background-color: #f5f5f5; /* 淡灰色背景 */
                        color: #333; /* 深灰色文字 */
                    }

                    header {
                        text-align: center;
                        padding: 20px;
                    }

                    nav ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                    }

                    nav li {
                        display: inline-block;
                        margin: 0 10px;
                    }

                    main {
                        padding: 20px;
                    }

                    /* 輪播區域 */
                    .slider {
                        position: relative;
                        width: 100%;
                        max-width: 600px;
                        margin: 20px auto;
                        overflow: hidden;
                        border-radius: 10px;
                    }

                    .slide {
                        display: none;
                        width: 100%;
                    }

                        .slide img {
                            width: 100%;
                            height: auto;
                            display: block;
                        }

                        .slide.active {
                            display: block;
                        }

                    footer {
                        text-align: center;
                        padding: 10px;
                    }


                </style>
            </head>
            <body>
                <header>
                    <h1>我的網站</h1>
                    <nav>
                        <ul>
                            <li><a href="#">首頁</a></li>
                            <li><a href="#">關於</a></li>
                            <li><a href="#">作品</a></li>
                            <li><a href="#">聯絡</a></li>
                        </ul>
                    </nav>
                </header>

                <main>
                    <section>
                        <h2>關於我們</h2>
                        <p>我們致力於提供高品質的內容和服務，幫助您了解更多有關我們的資訊。</p>
                        <p>我們的網站包含了最新的作品展示、詳細的公司介紹以及方便的聯絡方式。</p>
                    </section>
                    <section>
                        <h2>我們的服務</h2>
                        <p>我們提供多種服務，包括網站設計、品牌策劃、內容創作等。無論您的需求是什麼，我們都有專業的團隊為您提供支持。</p>
                        <ul>
                            <li>網站設計 - 專業的網站設計服務，讓您的品牌更具吸引力。</li>
                            <li>品牌策劃 - 精準的品牌策劃，幫助您在市場上脫穎而出。</li>
                            <li>內容創作 - 高品質的內容創作，提升您的網站曝光率。</li>
                        </ul>
                    </section>
                    <section>
                        <h2>用戶評價</h2>
                        <blockquote>
                            <p>“這個網站提供了非常有用的信息，設計簡潔且易於導航。” - 張三</p>
                        </blockquote>
                        <blockquote>
                            <p>“我非常滿意這裡的服務，專業！” - 李四</p>
                        </blockquote>
                    </section>
                    <section>
                        <h2>最新消息</h2>
                        <article>
                            <h3>新版本發佈</h3>
                            <p>我們剛剛發佈了網站的新版本，包含了更多的功能和改進，歡迎體驗。</p>
                        </article>
                        <article>
                            <h3>即將舉行的活動</h3>
                            <p>我們將於下月舉行一場重要的活動，詳細消息敬請關註我們的網站。</p>
                        </article>
                    </section>


                    <!-- 輪播區域 -->
                    <div class="slider">
                        <div class="slide active"><img src="~/templates/deco_left.png" alt="圖片1"></div>
                        <div class="slide"><img src="~/templates/deco_right.png" alt="圖片2"></div>
                        <div class="slide"><img src="~/templates/webphoto.jpg" alt="圖片3"></div>
                    </div>
                </main>



                <!-- JavaScript 部分 -->
                <script>
                    const slider = document.querySelector('.slider');
                    const slides = slider.querySelectorAll('.slide');
                    let index = 0;

                    function nextSlide() {
                        slides[index].classList.remove('active');
                        index = (index + 1) % slides.length;
                        slides[index].classList.add('active');
                    }

                    // 每 3 秒自動切換
                    setInterval(nextSlide, 3000);


                </script>
            </body>
        </html>

解釋程式碼
這段代碼是 ASP.NET MVC 視圖模板中的 HTML 和 C# 代碼的組合。主要的部分是用來生成一個網頁，具體包括布局定義、標題設置、頁面結構、樣式和 JavaScript 功能。

代碼解析

  1. 布局設置和標題設置：

    @{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact16";
}
    • Layout 指定了頁面所使用的布局文件，_Layout.cshtml 是一個共享布局模板，通常定義了頁眉、頁腳等通用部分。
    • ViewBag.Title 設置了頁面的標題為 "Contact16"，這個值會在布局文件中用來動態顯示頁面的標題。

  2. 頁面內容：

    <div class="farm-wrapper">
    <h3>作品-極簡風網站</h3>
    <h3>建置中</h3>
</div>
    • 這是頁面的頂部部分，顯示了 "作品-極簡風網站" 和 "建置中" 這兩個標題，表示網站正在建設中。

  3. HTML 頁面結構：

    <html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>極簡風網站</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="Content/css/reset.css">
    <link rel="stylesheet" href="Content/css/farm-style.css">
    • 定義了網頁的基礎結構，包括 DOCTYPE、meta 信息（編碼和視口設置）、頁面標題 "極簡風網站"，以及引用了外部的 CSS 文件來進行樣式設置。

  4. 內聯樣式表：

    <style>
    body {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5; /* 淡灰色背景 */
        color: #333; /* 深灰色文字 */
    }
    /* 其他樣式略 */
</style>
    • 定義了一些基礎樣式，控制頁面布局和外觀，如背景顏色、字體、頁眉和導航菜單的布局等。

  5. 頁面結構內容：

    <body>
    <header>
        <h1>我的網站</h1>
        <nav>
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">關於</a></li>
                <li><a href="#">作品</a></li>
                <li><a href="#">聯絡</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- 包含多個段落的展示 -->
    </main>
    <footer>
        <p>&copy; 2024 我的網站</p>
    </footer>
</body>
    • 包括頁眉部分（顯示網站標題 "我的網站" 和導航菜單），主內容部分（包括多個章節如 "關於我們"、"我們的服務"、"用戶評價"、"最新消息"），以及頁腳部分。

  6. 輪播圖功能：

    <div class="slider">
    <div class="slide active"><img src="~/templates/deco_left.png" alt="圖片1"></div>
    <div class="slide"><img src="~/templates/deco_right.png" alt="圖片2"></div>
    <div class="slide"><img src="~/templates/webphoto.jpg" alt="圖片3"></div>
</div>
    • 定義了一個輪播圖區域，包含多個圖片（每個圖片放在一個 div.slide 中）。
    • slide.active 類的 div 元素默認顯示，其他 slide 元素最初是隱藏的。

  7. 輪播圖的 JavaScript 邏輯：

    <script>
    const slider = document.querySelector('.slider');
    const slides = slider.querySelectorAll('.slide');
    let index = 0;

    function nextSlide() {
        slides[index].classList.remove('active');
        index = (index + 1) % slides.length;
        slides[index].classList.add('active');
    }

    setInterval(nextSlide, 3000); // 每 3 秒自動切換
</script>
    • 這段 JavaScript 代碼實現了輪播圖的自動切換功能。每 3 秒鐘，當前顯示的圖片會被隱藏，然後顯示下一張圖片。

總結

這段代碼展示了一個極簡風格的網站頁面結構，包括頁面的導航、內容展示和圖片輪播功能。它使用了 HTML、CSS 和 JavaScript 來實現頁面布局和交互效果，同時通過 ASP.NET MVC 的視圖引擎提供動態數據（如頁面標題）。

跳出視窗提示:現代風
https://laihao2.com/Home/Contact17
https://ithelp.ithome.com.tw/upload/images/20241002/20119035OwuKOWFSTN.png

目前畫面上請客戶填入聯絡MAIL是還沒有實際功能，可能後面有

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

這裡沒有用到資料表~

Controllers裡面的Entities>

解釋程式碼
這段代碼是一個 C# 中 ASP.NET MVC 的控制器方法，它處理來自客戶端的請求並返回一個視圖。我們可以逐步解析：

public ActionResult Contact17()
{
    ViewBag.Message = "Your contact page.";

    return View();
}

  1. public ActionResult Contact17():

    • 這是一個公共方法，名為 Contact16，返回類型為 ActionResult。
    • 在 ASP.NET MVC 中，ActionResult 是一個基類，表示控制器動作的結果，它可以是多種類型的響應（例如返回一個視圖、重定向到另一個 URL 等）。
    • 這個方法的名稱通常與特定的 URL 路徑綁定，用戶通過訪問這個路徑來觸發該方法。

  2. ViewBag.Message = "Your contact page.":

    • 這是將一條消息傳遞給視圖的代碼。
    • ViewBag 是 ASP.NET MVC 中的一個動態對象，它用於在控制器和視圖之間傳遞數據。在這個例子中，Message 字段被賦值為 "Your contact page."。
    • 這個數據將傳遞到視圖中，可以在視圖模板里訪問 ViewBag.Message 來顯示這條信息。

  3. return View();:

    • 這是返回一個視圖給客戶端的代碼。
    • View() 方法告訴 MVC 框架返回與該控制器動作名稱相同的視圖（在這個例子中，很可能是名為 Contact17.cshtml 的視圖文件）。
    • 視圖負責生成最終返回給客戶端的 HTML 頁面。

總結: 這個方法接收用戶請求，設定一個名為 Message 的字符串變量，然後將該變量傳遞給視圖，用於顯示聯系頁面的相關信息。

產生畫面View程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact17";
}

<div class="farm-wrapper">

    <h3>作品-現代風網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <!DOCTYPE html>
            <html lang="zh-TW">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>現代風網站</title>
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="Content/css/reset.css">
                <link rel="stylesheet" href="Content/css/farm-style.css">
                <style>
                    body {
                        font-family: 'Roboto', sans-serif;
                        margin: 0;
                        padding: 0;
                        line-height: 1.6;
                        background-color: #fafafa;
                    }

                    header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background-color: #333;
                        color: #fff;
                        padding: 20px 40px;
                    }

                        header h1 {
                            font-weight: 700;
                            margin: 0;
                        }

                    nav ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                    }

                    nav li {
                        display: inline-block;
                        margin: 0 15px;
                    }

                    nav a {
                        color: #fff;
                        text-decoration: none;
                        font-weight: 500;
                        transition: color 0.3s;
                    }

                        nav a:hover {
                            color: #ff6347; /* 橘紅色效果 */
                        }

                    main {
                        padding: 40px;
                        max-width: 1200px;
                        margin: auto;
                    }

                        main h2 {
                            font-size: 2rem;
                            margin-bottom: 20px;
                            color: #333;
                        }

                    footer {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #333;
                        color: #fff;
                        padding: 10px 40px;
                    }

                    header nav {
                        flex: 1;
                        text-align: right;
                    }

                    html {
                        scroll-behavior: smooth;
                    }

                    body.dark-theme {
                        background-color: #333;
                        color: #fff;
                    }

                    header.dark-theme, footer.dark-theme {
                        background-color: #444;
                    }

                    nav a.dark-theme {
                        color: #ddd;
                    }

                        nav a.dark-theme:hover {
                            color: #ff6347;
                        }



                </style>
            </head>
            <body>
                <header>
                    <h1>我的網站</h1>
                    <button id="theme-toggle">切換主題</button>
                    <nav>
                        <ul>
                            <li><a href="#">首頁</a></li>
                            <li><a href="#">關於</a></li>
                            <li><a href="#">產品</a></li>
                            <li><a href="#">聯絡</a></li>
                        </ul>
                    </nav>
                </header>

                <main>
                    <section>
                        <h2>歡迎來到我的網站</h2>
                        <p>這是一個現代風格的網站範例。我們致力於提供優質的內容和服務，希望您能在這裏找到您所需要的。</p>
                        <p>請瀏覽我們的產品頁面，了解更多關於我們的服務，或者通過聯繫我們的表單與我們取得聯繫。</p>
                    </section>
                    <section>
                        <h2>關於我們</h2>
                        <p>我們是一家創新型公司，專註於提供高品質的產品和服務。我們的團隊擁有豐富的經驗和專業知識，致力於滿足客戶的需求。</p>
                        <p>了解更多關於我們的使命和願景，請訪問我們的 <a href="#">關於</a> 頁面。</p>
                    </section>
                    <section>
                        <h2>我們的產品</h2>
                        <p>我們提供多種高品質的產品，涵蓋多個領域。每一種產品都經過嚴格的測試和篩選，以確保最佳性能和可靠性。</p>
                        <ul>
                            <li><strong>產品1：</strong>簡短的描述。</li>

                        </ul>
                        <p>訪問我們的 <a href="#">產品</a> 頁面，了解更多內容。</p>
                    </section>
                    <section>
                        <h2>客戶評價</h2>
                        <blockquote>
                            <p>“這是一家非常值得信賴的公司，產品非常出色！”</p>
                            <footer>- 張三</footer>
                        </blockquote>
                        <blockquote>
                            <p>“他們的服務非常專業，我非常滿意！”</p>
                            <footer>- 里斯</footer>
                        </blockquote>
                    </section>
                    <section>
                        <h2>常見問題解答</h2>
                        <h3>我們如何聯繫支持團隊？</h3>
                        <p>您可以通過 <a href="#">聯繫我們</a> 頁面獲取支持。</p>

                    </section>
                    <section>
                        <h2>最新動態</h2>
                        <article>
                            <h3>標題1</h3>
                            <p>簡短的新聞內容。</p>
                            <a href="#">閱讀更多</a>
                        </article>

                    </section>
                    <section>
                        <h2>聯繫我們</h2>
                        <p>如果您有任何問題或建議，請隨時通過以下方式與我們聯繫：</p>
                        <address>
                            <p>地址: 1234 例子街, 城市, 國家</p>
                            <p>電話: (123) 456-7890</p>
                            <p>電子郵件: <a href="#">jzs2home@hotmail.com</a></p>
                        </address>
                    </section>


                </main>
                <form id="contact-form">
                    <label for="name">姓名：</label>
                    <input type="text" id="name" name="name" required>
                    <br>
                    <label for="email">電子郵件：</label>
                    <input type="email" id="email" name="email" required>
                    <br>
                    <button type="submit">送出</button>
                </form>



                <!-- JavaScript 部分 -->
                <script>
                    document.addEventListener('DOMContentLoaded', () => {
                        alert('歡迎來到我的網站！');
                    });
                    document.addEventListener('DOMContentLoaded', () => {
                        const themeToggleButton = document.getElementById('theme-toggle');

                        themeToggleButton.addEventListener('click', () => {
                            document.body.classList.toggle('dark-theme');
                        });
                    });
                    document.getElementById('contact-form').addEventListener('submit', (event) => {
                        const name = document.getElementById('name').value;
                        const email = document.getElementById('email').value;

                        if (name === '' || email === '') {
                            alert('所有欄位都是必填的！');
                            event.preventDefault(); // 防止表單提交
                        }
                    });

                </script>
            </body>
        </html>

解釋程式碼
這段代碼是 ASP.NET MVC 視圖文件中的 HTML 和 C# 代碼的組合，生成了一個“現代風格”的網頁，提供了多種功能和頁面內容。下面逐步解析代碼的各個部分：

1. 布局和標題設置

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact17";
}
  • Layout：定義該視圖使用共享的布局文件 _Layout.cshtml，這個文件通常包含網站的通用結構，比如頁眉、頁腳等。
  • ViewBag.Title：設置頁面的標題為“Contact17”，這個會影響頁面的 <title> 標簽，通常會出現在瀏覽器標簽欄。

2. 頁面結構

<div class="farm-wrapper">
    <h3>作品-現代風網站</h3>
    <h3>建置中</h3>
</div>
  • 這個部分展示了“作品-現代風網站”和“建置中”的標題，表明該頁面展示的是一個現代風格的網站，可能尚在建設中。

3. HTML頁面結構

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>現代風網站</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="Content/css/reset.css">
    <link rel="stylesheet" href="Content/css/farm-style.css">
  • HTML 結構：設置了頁面的基礎結構，如 charset、viewport（自適應布局）、頁面標題“現代風網站”。
  • 外部樣式表：通過 <link> 標簽引用了多個外部 CSS 文件，負責頁面的樣式設計。

4. 內聯樣式

<style>
    body {
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
        line-height: 1.6;
        background-color: #fafafa;
    }
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #333;
        color: #fff;
        padding: 20px 40px;
    }
    /* 其他樣式省略 */
</style>
  • 基本樣式：定義了頁面的整體外觀，如 body 的字體、背景顏色、行高、頁眉的布局、導航欄的樣式等。
  • 深色主題支持：通過 body.dark-theme 和 header.dark-theme 類，支持深色模式，當用戶切換到深色主題時，頁面的背景顏色和文字顏色會發生變化。

5. 頁面內容

<body>
    <header>
        <h1>我的網站</h1>
        <button id="theme-toggle">切換主題</button>
        <nav>
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">關於</a></li>
                <li><a href="#">產品</a></li>
                <li><a href="#">聯絡</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>歡迎來到我的網站</h2>
            <p>這是一個現代風格的網站範例。</p>
        </section>
        <!-- 其他段落內容省略 -->
    </main>
  • Header：包含了一個網站標題“我的網站”，一個按鈕用於切換主題，以及導航欄鏈接到不同的頁面（首頁、關於、產品、聯系等）。
  • Main：頁面的主要內容區域，包含了多個 section，每個部分展示了不同的內容，例如歡迎信息、關於我們、產品介紹、客戶評價、常見問題等。

6. 表單處理

<form id="contact-form">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">電子郵件：</label>
    <input type="email" id="email" name="email" required>
    <br>
    <button type="submit">送出</button>
</form>
  • 這是一個簡單的聯系表單，用戶需要填寫姓名和電子郵件地址，並通過提交按鈕發送表單。

7. JavaScript 交互

document.addEventListener('DOMContentLoaded', () => {
    alert('歡迎來到我的網站！');
});
document.addEventListener('DOMContentLoaded', () => {
    const themeToggleButton = document.getElementById('theme-toggle');

    themeToggleButton.addEventListener('click', () => {
        document.body.classList.toggle('dark-theme');
    });
});
document.getElementById('contact-form').addEventListener('submit', (event) => {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;

    if (name === '' || email === '') {
        alert('所有欄位都是必填的！');
        event.preventDefault(); // 防止表單提交
    }
});
  • 歡迎彈窗：當頁面加載完成時，彈出一個歡迎提示框。
  • 主題切換：通過點擊“切換主題”按鈕，頁面可以在深色和淺色主題之間切換。
  • 表單驗證：在表單提交前，檢查 name 和 email 字段是否為空，若為空則彈出提示並阻止表單提交。

總結

這段代碼生成了一個現代風格的網站模板，包含響應式設計、主題切換、表單驗證等功能。HTML、CSS 和 JavaScript 的結合使得頁面具有良好的視覺效果和用戶交互性，同時通過 ASP.NET MVC 模板引擎動態生成頁面內容。

大家明天見~/images/emoticon/emoticon01.gif


上一篇
要寫很多及BUTTON選取:出差申請單
下一篇
現在很流行的VUE
系列文
asp.net可以變出那些功能 共 30 篇
  1. 26
    現在很流行的VUE
  2. 27
    簡約風
  3. 28
    簡約風首頁看留言的地方
  4. 29
    實用日語加入資料庫寫法:新增
  5. 30
    加上資料表後的: 實用日語 列表
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22201 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙